<h3>{{ 'app.password.forgot' | i18n }}</h3>
<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
  @if (error) {
    <nz-alert [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg" />
  }
  <nz-form-item>
    <nz-form-control [nzErrorTip]="mailErrorTip">
      <nz-input-group nzSize="large" nzAddonBeforeIcon="user">
        <input nz-input formControlName="email" placeholder="邮箱" />
      </nz-input-group>
      <ng-template #mailErrorTip let-i>
        @if (i.errors?.required) {
          <ng-container>{{ 'validation.email.required' | i18n }}</ng-container>
        }
        @if (i.errors?.email) {
          <ng-container>{{ 'validation.email.wrong-format' | i18n }}</ng-container>
        }
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="'validation.verification-code.required' | i18n">
      <nz-row [nzGutter]="8">
        <nz-col [nzSpan]="13">
          <nz-input-group nzSize="large" nzPrefixIcon="mail">
            <input nz-input formControlName="code" placeholder="验证码" />
          </nz-input-group>
        </nz-col>
        <nz-col [nzSpan]="10">
          <img
            nz-image
            [nzSrc]="captcha.imageData"
            style="height: 40px; width: 100%"
            (click)="getCaptch()"
            [nzDisablePreview]="true"
            nz-popover
            nzPopoverTitle="验证码"
            nzPopoverContent="看不清？点击更换"
          />
        </nz-col>
      </nz-row>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <button nz-button nzType="primary" nzSize="large" type="submit" [nzLoading]="http.loading" class="submit">
      {{ 'app.password.forgot' | i18n }}
    </button>
  </nz-form-item>
</form>
